<template>
	<view class="box" hover-class="boxHover" hover-stay-time="0">
		<!-- hover-class：指定按下去的样式类 -->
		<!-- hover-stay-time：手指松开后点击态保留时间 -->
		<!-- hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态（防止冒泡） -->
		<view class="inner" hover-class="innerHover" hover-stop-propagation="true">内部元素</view>
	</view>

	<view>-----</view>

	<text selectable="true">text文本标签</text>
	<!-- selectable：文本是否可选，默认false不可选中 -->
	<text space="emsp">text文本                         标签</text>
	<!-- space：显示连续空格 -->
	
	<view>-----</view>
	
	<!-- scroll-y：允许纵向滚动 -->
	<!-- scroll-x：允许横向滚动 -->
	<scroll-view scroll-x="true" class="scrollView">
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
		<view class="scroll-box">scroll子元素</view>
	</scroll-view>
	
	<view>
		<!-- 
			indicator-dots: 是否显示面板指示点
			indicator-color: 指示点颜色
			indicator-active-color: 当前选中的指示点颜色
			circular: 是否采用衔接滑动，即播放到末尾后重新回到开头(最后一个划到第一个)
			autoplay：是否自动切换
			interval: 自动切换时间间隔
			vertical: 滑动方向是否为纵向
		 -->
		<swiper class="mySwipper" indicator-dots="true" 
			indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" circular="true" 
			autoplay="true" interval="2000" vertical="true">
			<swiper-item class="mySwipperItem">
				<image src="../../static/pic1.png" mode="aspectFill"  />
			</swiper-item>
			<swiper-item class="mySwipperItem">
				<image src="../../static/pic2.png" mode="aspectFill" ></image>
			</swiper-item>
			<swiper-item class="mySwipperItem">
				<image src="../../static/pic3.webp" mode="aspectFill" ></image>
			</swiper-item>
			<swiper-item class="mySwipperItem">
				<image src="../../static/pic4.jpg" mode="aspectFill" ></image>
			</swiper-item>
		</swiper>
	</view>
	
	<view>
		<image src="../../static/logo.png" mode="" class="pic1"></image>
		<image src="../../static/pic3.webp" mode="aspectFill" class="pic2"></image>
		<image src="../../static/pic4.jpg" mode="widthFix" class="pic3"></image>
		<image src="../../static/pic4.jpg" mode="heightFix" class="pic4"></image>
	</view>
</template>

<script setup></script>

<style scoped lang="scss">
.scrollView{
	width: 80%;
	height: 200px;
	border: 1px solid red;
	white-space: nowrap; // 不换行
	.scroll-box{
		width: 100px;
		height: 100px;
		background-color: green;
		display: inline-block;
	}
}
// 轮播图样式
.mySwipper{
	width: 100vw;
	height: 200px;
	border: 1px solid green;
	.mySwipperItem{
		width: 100%;
		height: 100%;
		background-color: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.mySwipperItem:nth-child(2n){
		background-color: orange;
	}
}

// 图片样式
.pic1{
	width: 150px;
	height: 150px;
}
.pic2{
	width: 200px;
	height: 200px;
}
.pic3{
	width: 300px;
}
.pic4{
	height: 300px;
}
</style>